<template>
  <div class="Albumsongs">
    <div class="main">
      <div class="titlelist">
        <span>音乐标题</span>
        <span>歌手</span>
        <span>专辑</span>
        <span>时长</span>
      </div>
      <div @click="getmusci(item.id,item.name,item.ar,item.al.picUrl,item.dt)" class="muscilist" v-for="(item,index) in albumsongs.songs" :key="item.id" :class="index%2==0?'p':''">
        <span class="span1">{{index+1}}</span>
        <i class="iconfont icon-aixin " style="opacity:0.5;margin-left: 8px;"></i>
        <i class="iconfont icon-xiazai " style="opacity:0.5;margin-left: 8px;"></i>
        <span class="span2">{{item.name}}</span>
        <span class="span3" v-for="item1 in item.ar" :key="item1.id">{{item1.name}}</span>
        <span class="span4">{{item.al.name}}</span>
        <span class="span5" v-for="(item1,index1) in time" :key="index1" v-show="index==index1">{{item1}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus.js'
import Disconshelves from '../Home/Latestmusic/Disconshelves.vue'
export default {
  name: 'Albumsongs',
  data() {
    return {
      time: []
    }
  },
  methods: {
    getmusci(e, n, v, m, time) {
      Bus.$emit('music', e, n, v, m, time)
    }
  },
  components: { Disconshelves },
  mounted() {
    this.$store.dispatch('getGetalbumcontent', { id: this.$route.query.id })
    this.$store.dispatch('getAlbumdynamicinformation', { id: this.$route.query.id })
  },
  computed: {
    ...mapState({
      commentCount: state => state.search.commentCount,
      albumsongs: state => state.search.albumsongs
    })
  },
  watch: {
    albumsongs: {
      handler(v, o) {
        let t = v.songs.map(val => {
          return val.dt
        })
        this.time = t.map(val => {
          let d = new Date(val)
          let m = d.getMinutes()
          let s = d.getSeconds()
          return m + ':' + s
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Albumsongs {
  .main {
    margin-top: 20px;

    .titlelist {
      margin-left: 130px;
      display: grid;
      grid-template-columns: 400px 200px 300px 200px;
      font-size: 14px;
      opacity: 0.4;
    }
    .muscilist {
      margin-left: 30px;
      display: flex;
      align-items: center;
      padding: 5px;
      .span1 {
        font-size: 8px;
        opacity: 0.3;
      }
      .span2 {
        margin-left: 35px;
        font-size: 14px;
        opacity: 0.7;
        width: 400px;
        overflow: hidden;
      }
      .span3 {
        width: 200px;
        font-size: 14px;
        opacity: 0.7;
        overflow: hidden;
      }
      .span4 {
        width: 300px;
        font-size: 14px;
        opacity: 0.7;
        overflow: hidden;
      }
      .span5 {
        font-size: 12px;
        opacity: 0.4;
      }
    }
    .muscilist:hover {
      cursor: pointer;
      background-color: rgb(231, 230, 227);
    }
    .p {
      background-color: rgb(240, 242, 243);
    }
  }
}
</style>